<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>CHANGE ME</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		{{include 'web2py_ajax.html'}}
		<link rel=stylesheet href="{{=URL('static','css/reset.css')}}" />
		<link rel=stylesheet href="{{=URL('static','css/style.css')}}" />
		<link rel="shortcut icon" href="{{=URL('static','images/favicon.png')}}" />
		
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization,weather&key={{=apiKey}}"></script>
		
		<script type="text/javascript">
			var map;
			var layerOne;
			var layerTwo;
			var weatherlayer;
			
			function initialize() {
				var mapOptions = {
					center: new google.maps.LatLng(-31.9662894928354, 115.86233139038086),
					zoom: 12,
					mapTypeId: google.maps.MapTypeId.ROADMAP, //ROADMAP, HYBRID, TERRAIN, SATELLITE 
					disableDefaultUI: true,
					mapTypeControl: true,
				};
				
				map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

				//This is the "bolt" layer in the NGIS GME
				layerOne = new google.maps.visualization.MapsEngineLayer({
					layerId: '16075412419356476951-16924823977025512720',
					map: null,
					suppressInfoWindows: false,
					accessToken: "{{=token}}",
				});

				layerTwo = new google.maps.visualization.MapsEngineLayer({
					layerId: '16075412419356476951-03901126721798534261',
					map: null,
					suppressInfoWindows: false,
					accessToken: "{{=token}}",
				});

				weatherlayer = new google.maps.weather.WeatherLayer({
					map: null,
				});
			}

			function updateOptions() {
				var form = document.options;
				
				if (form.layerOne.checked){
					layerOne.setMap(map);
				} else {
					layerOne.setMap(null);
				}

				if (form.layerTwo.checked){
					layerTwo.setMap(map);
				} else {
					layerTwo.setMap(null);
				}

				if (form.weatherlayer.checked){
					weatherlayer.setMap(map);
				} else {
					weatherlayer.setMap(null);
				}
			}
		</script>
		
	</head>
	
	<body onload="initialize()">
		<div id="map-canvas"></div>
		<div id="panel">
			<div class="logo">
				<a href="http://www.ngis.com.au/" target="_blank">
					<img src="https://s3-ap-southeast-2.amazonaws.com/ngis/NGIS_Logo.png" width="300" />
				</a>
			</div>
			<form name="options" action="javascript:updateOptions();">
				<table class="layers">
					<tr>
						<td>
							<input type="checkbox" onclick="updateOptions();" name="layerOne" />
						</td>
						<td>
							<b>Layer One</b>
						</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" onclick="updateOptions();" name="layerTwo" />
						</td>
						<td>
							<b>Layer Two</b>
						</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" onclick="updateOptions();" name="weatherlayer" />
						</td>
						<td>
							<b>Weather Layer</b>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>